<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>研学旅行后台系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" th:href="@{/css/font.css}">
<link rel="stylesheet" th:href="@{/css/xadmin.css}">
<link rel="stylesheet"
	href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"
	src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/reconnecting-websocket.min.js}"></script>
<script type="text/javascript" th:src="@{/js/init-socket.js}"></script>

</head>

<style>
.xbs768 {
	display: block;
}

.layui-textarea {
	position: relative;
	min-height: 100px;
	height: auto;
	line-height: 20px;
	padding: 6px 10px;
	resize: vertical;
	margin-left: 110px;
	margin-top: -50px;
	width: 800px;
}

.layui-input-block {
	margin-left: 0px;
	min-height: 36px;
}
</style>



<body>
	<!-- 中部开始 -->
	<div class="wrapper">
		<!-- 右侧主体开始 -->
		<div class="page-content">
			<div class="content">
<!-- 				 <form class="layui-form"  enctype="multipart/form-data"> -->
					<div class="layui-form-pane" style="text-align: center;">
						<div class="layui-form-item" style="display: inline-block;">
							<div class="layui-input-inline">
								<input type="text" name="employeename" placeholder="请输入员工名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-input-inline" style="width: 80px">
								<button class="layui-btn"  v-on:click="queryPage(1)">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</div>
					</div>
				<table class="layui-table">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkall" value=""></th>
							<th>ID</th>
							<th>员工姓名</th>
							<th>性别</th>
							<th>手机</th>
							<th>邮箱</th>
							<th>地址</th>
							<th>加入时间</th>

							<th>所属部门</th>
							<th>职位</th>

							<th>工资（/月）</th>
							<th>在职状态</th>

						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in page.list">
							<td><input type="checkbox" value="1" :iid="item.id" name="s1" class="checkbox"></td>
							<td class="buMenid">{{item.id}}</td>
							<td>{{item.employeename}}</td>
							<td>{{item.sex}}</td>
							<td>{{item.phone}}</td>
							<td>{{item.email}}</td>
							<td>{{item.address}}</td>
							<!--   th:text="${#dates.format(item.createtime,'yyyy-MM-dd HH:mm')}" -->
							<td>{{item.createtime}}</td>
<!-- 							<td v-for="(items,index) in list"> -->
<!-- 								<td>{{items.name}}</td> -->
<!-- 								<td v-if="item.spare1==='items.id'">{{items.name}}</td> -->
<!-- 								<td v-if="item.spare1==='2'">教练部</td> -->
<!-- 								<td v-if="item.spare1==='3'">助手部</td> -->
<!-- 								<td v-if="item.spare1==='4'">员工部</td> --> 
<!-- 								<td v-if="item.spare1==='5'">领队部</td> --> 
<!-- 								<td v-if="item.spare1==='6'">其他部</td> --> 
<!-- 							</td> -->
								<td v-if="item.spare1==='1'">校友部</td>
								<td v-if="item.spare1==='2'">教练部</td>
								<td v-if="item.spare1==='3'">助手部</td>
								<td v-if="item.spare1==='4'">员工部</td>
								<td v-if="item.spare1==='5'">领队部</td>
								<td v-if="item.spare1==='6'">其他部</td>
							<td>{{item.job}}</td>
							<td>{{item.pay}}</td>
							<td class="td-status" v-if="item.state===1"><span
								class="layui-btn layui-btn-normal layui-btn-mini"> 在职 </span></td>
							<td class="td-status" v-if="item.state===2"><span
								class="layui-btn layui-btn-normal layui-btn-mini"> 离职 </span></td>
						</tr>
					</tbody>
				</table>

				<!--  <a th:href="employee?currentPage=${pageList.prePage }&employeename=${employeename}">上一页</a> 
          	$event.currentTarget	 <a th:href="employee?currentPage=${pageList.nextPage }&employeename=${employeename}">下一页</a>
          	 -->
				<button v-on:click="queryPage(page.prePage)"
					class="layui-btn layui-btn-warm">上一页</button>

				<button v-on:click="queryPage(page.nextPage)" class="layui-btn layui-btn-danger">下一页</button>
				<!-- 右侧内容框架，更改从这里开始 -->
					<div class="layui-form-item layui-form-text">
						<label for="L_sign" class="layui-form-label"> 公司通知 </label>
						<div class="layui-form-item"
							style="margin-top: 50px; margin-bottom: 20px;">
							<label class="layui-form-label xbs768">请输入标题:</label>
							<div class="layui-input-inline">
								<input type="text" name="username" placeholder="请输入标题"
									autocomplete="off" class="layui-input">
							</div>
						</div>
						<br>
						<div style="margin-left: 80px;margin-bottom: 70px">
							<input id="filgo" type="file" name="file" onchange="changeToop('filgo','imghead');" value="上传图片">
						</div>
						<br>
						<div class="layui-input-block" style="margin-top: 50px;">
							<label class="layui-form-label xbs768">请输入内容:</label>
							<textarea placeholder="请输入发布内容" id="L_sign" name="sign"
								autocomplete="off" class="layui-textarea" style="height: 80px;"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<label for="L_sign" class="layui-form-label"> </label>
						<button class="layui-btn" id="fasuo" key="set-mine" lay-filter="save"
							lay-submit>发送</button>
					</div>
<!-- 				</form> -->
					
				<!-- 右侧内容框架，更改从这里结束 -->
			</div>
		</div>
		<!-- 右侧主体结束 -->
	</div>
	<!-- 中部结束 -->
	<script th:inline="javascript">
   
    var vue = new Vue({
    	
    	el:'.wrapper',
    	data:{
    		page:'',
    		dluy:''
    	},methods:{
    		queryPage(ind){
    		page(ind);
    	}
    		
    	}
    	
    });
    
    
    function page(curPage){
    	var employeename = $("[name = employeename]").val();
		  $.ajax({
			  url:[[@{/notice/employeeQuery}]],
			  type:"post",
			  data:{
				  'currentPage':curPage,
				  'employeename':employeename
			  },
			  dataType:"json",
			  success:function(data){
				  vue.page = data;
			  }
			  
		  });
    	
    }
    
    
	$(function(){
		
		
		 $.ajax({
			  url:[[@{/notice/MyBuMen}]],
			  type:"post",
			  dataType:"json",
			  success:function(result){
				  alert(result);
				  vue.dluy = result;
			  }
		 });
		
		
		
		
		
		  $("#checkall").click(function(){
		  	if(this.checked==true){
		  		   $("[name='s1']").each(function(){
		  		   	this.checked=true;
		  		   	
		  		   });
			  	}else{
			  		$("[name='s1']").each(function(){
		  		   	this.checked=false;
		  		   	
		  		   });
			  	}
	  	
	  		});
		  
		  page(1);
		   
		  var buid = [];
		   
		  $("#fasuo").click(function(){
			  var title = $("[name=username]").val();
			  var content = $("[name=sign]").val();
// 			  var file = $("[name=file]").val();
			  var file = document.getElementById("filgo").files.item(0);
			  
			 $.each($(".checkbox"),function(){
				 if(this.checked){
					 var spare1 = $(this).attr("iid");
					 buid = spare1;
				var formData=new FormData(document.getElementById("filgo"));
				formData.append("title",title);
				formData.append("content",content);
				formData.append("spare1",buid);
				formData.append("file",file);
// 				formData.append("uid",uid);
				
					 $.ajax({
						  url:[[@{/notice/toAdd}]],
						  type:"post",
						  data:formData,
						  contentType:false,
						  processData:false,
						  success:function(result){
							  var index = parent.layer.getFrameIndex(window.name);
							  parent.layer.close(index);
						  },error:function(date){
							  var index = parent.layer.getFrameIndex(window.name);
							  parent.layer.close(index);
						  }
					 });
				 }
				 
			 });
			  
		  });
		  
		  
			var ws = new WebSocket("ws://localhost:8080/mywebsocket");
			ws.onopen = function(){
				console.log("连接成功!!");
			}
			ws.onerror = function(){
				console.log("失败!!");
			}

			ws.onmessage = function(result){
				console.log(result.data);
				alert(result.data);
			}
	    	
//	     	var socket;
//	 		if(typeof(WebSocket) == "undefined") {
//	 			alert("您的浏览器不支持WebSocket");
//	 			return;
//	 		}

//	 		$("#btnConnection").click(function() {
//	 			//实现化WebSocket对象，指定要连接的服务器地址与端口
//	 			socket = new WebSocket("ws://localhost:8080/WebSocketServer/ws/张三");
//	 			//打开事件
//	 			socket.onopen = function() {
//	 				alert("Socket 已打开");
//	 				//socket.send("这是来自客户端的消息" + location.href + new Date());
//	 			};
//	 			//获得消息事件
//	 			socket.onmessage = function(msg) {
//	 				alert(msg.data);
//	 			};
//	 			//关闭事件
//	 			socket.onclose = function() {
//	 				alert("Socket已关闭");
//	 			};
//	 			//发生了错误事件
//	 			socket.onerror = function() {
//	 				alert("发生了错误");
//	 			}
//	 		});

//	 		$("#btnSend").click(function() {
//	 			socket.send("这是来自客户端的消息" + location.href + new Date());
//	 		});

//	 		$("#btnClose").click(function() {
//	 			socket.close();
//	 		});
	    	
		  
		
	});
	
    
    
    
    
    </script>
</body>
</html>